<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Action Sheet - A11y</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>
  <script type="module">
    import { actionSheetController } from '../../../../dist/ionic/index.esm.js';
    window.actionSheetController = actionSheetController;
  </script>

  <body>
    <main class="ion-padding">
      <h1>Action Sheet - A11y</h1>

      <button class="expand" id="bothHeaders" onclick="presentBothHeaders()">Both Headers</button>
      <button class="expand" id="subHeaderOnly" onclick="presentSubHeaderOnly()">Subheader Only</button>
      <button class="expand" id="noHeaders" onclick="presentNoHeaders()">No Headers</button>
      <button class="expand" id="customAria" onclick="presentCustomAria()">Custom Aria</button>
      <button class="expand" id="ariaLabelButton" onclick="presentAriaLabelButton()">Aria Label Button</button>
      <button class="expand" id="ariaLabelCancelButton" onclick="presentAriaLabelCancelButton()">
        Aria Label Cancel Button
      </button>
    </main>

    <script>
      async function openActionSheet(opts) {
        const actionSheet = await actionSheetController.create(opts);
        await actionSheet.present();
      }

      function presentBothHeaders() {
        openActionSheet({
          header: 'Header',
          subHeader: 'Subtitle',
          buttons: ['Confirm'],
        });
      }

      function presentSubHeaderOnly() {
        openActionSheet({
          subHeader: 'Subtitle',
          buttons: ['Confirm'],
        });
      }

      function presentNoHeaders() {
        openActionSheet({
          buttons: ['Confirm'],
        });
      }

      function presentCustomAria() {
        openActionSheet({
          header: 'Header',
          subHeader: 'Subtitle',
          buttons: ['Confirm'],
          htmlAttributes: {
            'aria-labelledby': 'Custom title',
            'aria-describedby': 'Custom description',
          },
        });
      }

      function presentAriaLabelButton() {
        openActionSheet({
          header: 'Header',
          subHeader: 'Subtitle',
          buttons: [
            {
              text: 'Close',
              htmlAttributes: {
                'aria-label': 'close button',
                'aria-labelledby': 'close-label',
              },
            },
          ],
        });
      }

      function presentAriaLabelCancelButton() {
        openActionSheet({
          header: 'Header',
          subHeader: 'Subtitle',
          buttons: [
            {
              text: 'Cancel',
              role: 'cancel',
              htmlAttributes: {
                'aria-label': 'cancel button',
                'aria-labelledby': 'cancel-label',
              },
            },
          ],
        });
      }
    </script>
  </body>
</html>
